<template>
    <!-- 动态数-活动数--最佳次数 -->
  <div class="userInfo-box">
    <div style="margin-left: 5px;margin-top: 5px;">关于作者</div>
    <el-divider></el-divider>
    <div class="top-box">
        <div class="block" style="margin-bottom: 5px;"><el-avatar shape="square" :size="50" :src="require('@/assets/avator/'+authorInfo.avatar)"></el-avatar></div>
        <div class="username" style="margin-bottom: 5px;">{{authorInfo.username}}</div>
        <div class="fishage" style="margin-bottom: 5px;">{{ level }}</div>
    </div>
    <div class="info-box">
        <el-statistic group-separator=","  :value="authorInfo.blogCount" :title="title1"></el-statistic>
        <el-statistic group-separator=","  :value="authorInfo.eventCount" :title="title2"></el-statistic>
        <el-statistic group-separator=","  :value="authorInfo.secretCount" :title="title3"></el-statistic>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
        // squareUrl:require('@/assets/avator/admin.jpg'),
        title1:'动态数',
        title2:'活动数',
        title3:'秘籍数',
        // value1:this.authorInfo.blogCount,
        // value2:this.authorInfo.eventCount,
        // value3:this.authorInfo.secretCount,
        // username:'',
        fishage:null
    }
  },
  props:{
    userid:{
        type:Number,
        default:0
    },
    authorInfo:{
      type:Object,
      required:true
    }
  },
  computed:{
    level(){
      const age = this.authorInfo.fishage
      if (age < 2) {
              return "钓鱼菜鸟";
            } else if (age < 5) {
              return "钓鱼小白";
            } else if (age < 10) {
              return "钓鱼精英";
            } else if (age < 15) {
              return "钓鱼高手";
            } else {
              return "骨灰级钓手";
            }
    }
  },
  created(){
    console.log("mounted~!",this.userid)
    this.value1 = this.authorInfo.blogCount
    this.value2=this.authorInfo.eventCount
    this.value3 = this.authorInfo.secretCount
    this.squareUrl = require('@/assets/avator/'+this.authorInfo.avatar)
    this.username = this.authorInfo.username
    this.fishage = this.level
    console.log("chile ",this.authorInfo)
  }
}
</script>

<style scoped>
.top-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.info-box{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 5px;
}
</style>
